<template>
    <div>
        <el-dialog :visible="visible" title="运输查看" width="1000px" @close="onClose" @open="onOpen">
            <div class="box">
                <!-- 订单信息 -->
                <h3 class="title">订单信息</h3>
                <BlockText :config="orderInfo" :detail="orderData" />

                <!-- 排程信息 -->
                <h3 class="title">排程信息</h3>
                <BlockText :config="scheduleInfo" :detail="scheduleData" />

                <!-- 发料通知 -->
                <h3 class="title">发料通知</h3>
                <BlockTable :tableConfig="storeIssueInform" :tableData="storeIssueInformTableData" />

                <!-- 物流信息 -->
                <h3 class="title">物流信息</h3>
                <BlockText :config="logisticsInfo" :detail="logisticsData" />

                <!-- 物流异常信息 -->
                <h3 class="title">物流异常信息</h3>
                <BlockText :config="transportAbnormalInfo" :detail="transportAbnormalData" />

                <!-- 质检信息 -->
                <h3 class="title">质检信息</h3>
                <BlockTable :tableConfig="qualityInformation" :tableData="qualityInformationTableData" />

                <!-- 浇筑信息 -->
                <h3 class="title">浇筑信息</h3>
                <BlockTable :tableConfig="castingInfo" :tableData="castingInfoTableData" />
                <div v-if="vedioUrlList.length" class="itemBox">
                    <div class="item">
                        <span class="name">卸料视频：</span>
                        <a class="text link" :href="vedioUrlList[0] || '#'" @click="lookVideo">查看</a>
                    </div>
                    <div class="item">
                        <span class="name">卸料视频审核状态：</span>
                        <span class="text">{{logisticsData.videoAudit == 0 ? '审核' : logisticsData.videoAudit == 1 ? '通过' : '不通过'}}</span>
                    </div>
                </div>
                <div v-else class="itemBox">
                    <div class="item">
                        <span class="name">卸料视频：</span>
                        <span class="text">暂无</span>
                    </div>
                </div>

                <!-- 离场信息 -->
                <h3 class="title">离场信息</h3>
                <BlockText :config="leaveInfo" :detail="leaveData" />

                <!-- 签收信息 -->
                <h3 class="title">签收信息</h3>
                <BlockText :config="signInfo" :detail="signData" />

                <!-- 翻入信息 -->
                <h3 class="title">翻入信息</h3>
                <BlockTable :tableConfig="turnUnderInfo" :tableData="turnUnderInfoTableData" />

                <!-- 余料处理信息 -->
                <h3 class="title">余料处理信息</h3>
                <BlockTable :tableConfig="cloutDisposeInfo" :tableData="cloutDisposeInfoTableData" />
            </div>

            <span slot="footer" class="dialog-footer">
                <el-button class="bottom_all_two" @click="onClose">关 闭</el-button>
            </span>
        </el-dialog>
        
        <!-- 物料配合比弹框 -->
        <MaterialRatioDialog :config="MaterialRatioConfig" :visible.sync="MaterialRatioVisible" />
        <!-- 翻料信息弹框 -->
        <ReverseMaterialInfoDialog :config="ReverseMaterialInfoConfig" :visible.sync="ReverseMaterialInfoVisible" />
        <!-- 卸料视频查看 -->
        <VideoDialog :config="videoConfig" :visible.sync="videoVisible" />
    </div>
</template>

<script>
    import { getLogisticsDetail } from "@/api/smart/schedul/d.js"
    import BlockText from "./BlockText.vue"
    import BlockTable from "./BlockTable.vue"
    import MaterialRatioDialog from "./MaterialRatioDialog.vue"
    import ReverseMaterialInfoDialog from "./ReverseMaterialInfoDialog.vue"
    import VideoDialog from './VideoDialog.vue'

    export default {
        components: {
            BlockText,
            BlockTable,
            MaterialRatioDialog,
            ReverseMaterialInfoDialog,
            VideoDialog,
        },
        data() {
            return {
                data: {}, // 总数据
                vedioUrlList: [], // 卸料视频
                // 订单信息
                orderInfo: [
                    { label: '工程名称', field: 'engineeringName'},
                    { label: '浇筑部位', field: 'structuralParts'},
                    { label: '下单时间', field: 'createTime'},
                    { label: '订单提交人', field: 'createUserName'},
                    { label: '强度等级', field: 'strengthGrade' },
                    { label: '性能等级', field: 'performanceGrade', text: ({performanceGrade})=>this.disposeData(performanceGrade)},
                    { label: '材料要求', field: 'meterialRequirements', text: ({meterialRequirements})=>this.disposeData(meterialRequirements)},
                    { label: '特殊要求', field: 'specialRequirements', text: ({specialRequirements})=>this.disposeData(specialRequirements)},
                    { label: '其他要求', field: 'otherRequirements', text: ({otherRequirements})=>this.disposeData(otherRequirements)},
                    { label: '外加剂要求', field: 'admixtureRequirements', text: ({admixtureRequirements})=>this.disposeData(admixtureRequirements)},
                    { label: '联系人', field: 'person'},
                    { label: '联系电话', field: 'phoneNum'},
                    { label: '浇筑用量', field: 'pouringNum'},
                    { label: '浇筑方式', field: 'pouringMethod', text: ({pouringMethod})=>this.disposeData(pouringMethod)},
                    { label: '浇筑时间', field: 'pouringTime'},
                    { label: '泵送高度', field: 'pouringHigh'},
                    { label: '票单名称', field: 'noteName'},
                    { label: '产品名称', field: 'productName'},
                    { label: '增值服务项', field: 'servicePoint', text: ({servicePoint})=>this.disposeData(servicePoint)},
                    { label: '客户备注', field: 'remark'},
                    { label: '外部备注', field: 'orderRemark'},
                ],
                orderData: {},
                // 排程信息
                scheduleInfo: [
                    { label: '供应站点', field: 'pointName'},
                    { label: '结算方式', field: 'settleName'},
                    { label: '富余量', field: '', text: ()=> this.scheduleData.lossNum},
                    { label: '前场工长', field: 'foreManSpit'},
                    { label: '泵送单位', field: '', text: ()=> this.scheduleData.pumpingTeam},
                    { label: '运输单位', field: '', text: ()=> this.scheduleData.tankCar},
                    { label: '泵管单位', field: '', text: ()=> this.scheduleData.pipeName},
                    { label: '内部备注', field: 'remark'},
                    { label: '预算审核时间', field: '', text: ()=> this.orderData.approvedTime},
                    { label: '排程调整时间', field: '', text: ()=> this.orderData.adjustmentTime},
                    { label: '计划确认时间', field: '', text: ()=> this.orderData.customerCheckTime},
                ],
                scheduleData: {},
                // 发料通知（表格）
                storeIssueInform: [
                    { label: "发料时间", prop: "sendTime" },
                    { label: "发料人", prop: "createUserName" },
                    { label: "浇筑方式", prop: "pouringMethod" },
                    { label: "发料量", prop: "sendNum" },
                    { label: "提交时间", prop: "updateTime" },
                ],
                storeIssueInformTableData: [],
                // 物流信息
                logisticsInfo: [
                    { label: '订单编号', field: 'orderNo'},
                    { label: '物流编号', field: 'code'},
                    { label: '车牌号', field: 'carNo'},
                    { label: '生产时间', field: 'proTime'},
                    { label: '票面量（方）', field: 'faceValue'},
                    { label: '生产量（方）', field: 'proNum'},
                    { label: '富余量（方）', field: 'residueNum'},
                    { label: '转入量', field: 'shiftTo'},
                    { label: '物流数据来源', field: 'dataType', text:({dataType})=>{
                        const map = {
                            1: 'ERP',
                            2: '信息补录',
                            3: '空票签收',
                            4: '外协提交'
                        }
                        return map[dataType] || '--'
                    }},
                    { label: '状态', field: 'dataStatus', text:({dataStatus})=>{
                        const map = {
                            1: '检测中',
                            2: '运输中',
                            3: '浇筑中',
                            4: '已签收',
                            5: '未确认',
                            6: '待签收',
                            7: '已拒绝',
                            8: '已取消',
                            9: '已完成'
                        }
                        return map[dataStatus] || '--'
                    }},
                    { label: '生产线', field: 'proLine'},
                    { label: '容重', field: 'bulkDensity'},
                    { label: '异常调整量（方）', field: 'adjustNum'},
                    { label: '出站过磅时间', field: 'outboundWeighingTime'},
                    { label: '站点出场时间', field: 'leaveTime'},
                    { label: '工地到场时间', field: 'presentTime'},
                    { label: '出站过磅方量', field: 'actualVolume'},
                    { label: '配合比编号', field: 'mixProportion' ,text: ()=>`<span class="link">配合比</span>`, click: ()=>this.lookMaterialRatio()},
                    { label: '司机', field: 'driverName'},
                ],
                logisticsData: {},
                // 运输异常信息
                transportAbnormalInfo: [
                    { label: '申报时间', field: 'declarationTime'},
                    { label: '申报人', field: 'declarationPeople'},
                    { label: '申报内容', field: 'declarationContent'},
                    { label: '照片/视频', field: '', text: ()=>`<span class="link">查看</span>`},
                    { label: '异常描述', field: 'declarationDescribe'},
                ],
                transportAbnormalData: {},
                // 质检信息（表格）
                qualityInformation: [
                    { label: "检验类型", prop: "detectionType" },
                    { label: "生成时间", prop: "createTime" },
                    { label: "检验编号", prop: "checkoutNumber" },
                    { label: "取样时间", prop: "orderNo" },
                    { label: "检验人", prop: "inspector" },
                    { label: "检验时间", prop: "detectionTime" },
                    { label: "自动检验结果", prop: "orderNo" },
                    { label: "处理方式", prop: "orderNo" },
                ],
                qualityInformationTableData: [],
                 // 浇筑信息（表格）
                castingInfo: [
                    { label: "实际浇筑方式", prop: "pouringWay" },
                    { label: "泵送单位", prop: "pumpingUnit" },
                    { label: "泵机车牌/编号", prop: "pumpNo" },
                    { label: "泵工", prop: "pumpManName" },
                    { label: "高度/臂长（米）", prop: "height" },
                    { label: "预估浇筑量（方）", prop: "estimatedPouringNum" },
                    { label: "实际浇筑量（方）", prop: "actualPouringNum" },
                    { label: "扫码卸料时间", prop: "createTime", render: ({row})=>{
                        const d = row.createTime;
                        return d ? `${d[0]}-${d[1]}-${d[2]} ${d[3]}:${d[4]}:${d[5]}` : ''
                    }},
                ],
                castingInfoTableData: [],
                // 离场信息
                leaveInfo: [
                    { label: '离场状态', field: 'type', text:()=>{
                        const obj = {
                            1: '待审核',
                            2: '已驳回',
                            3: '已审核',
                            4: '已通过待客户审核',
                            5: '已审核'
                        }
                        return obj[this.leaveData.type] || '--'
                    }},
                    { label: '运输距离', field: 'distance'},
                    { label: '客户小方量运输补差（方）', field: 'isSmallQuantities', text:()=>this.logisticsData.smallQuantitiesDelta},
                    { label: '运输单位小方量补差（方）', field: 'isSmallTransport', text:()=>this.logisticsData.smallDeltaTransport},
                    { label: '内部余料标记', field: 'frontIsClout', text:()=>this.leaveData.frontIsClout == '1' ? '是' : '否'},
                    { label: '客户余料标记', field: 'companyIsClout', text:()=>this.leaveData.companyIsClout == '1' ? '是' : '否'},
                    { label: '泵管使用', field: 'owingTheUser', text:()=>this.owingTheUser},
                    { label: '离场申请时间', field: 'createTime'},
                    { label: '客户确认时间', field: 'affirmTime', text:()=>this.logisticsData.affirmTime || '--'},
                    { label: '工地离场时间', field: ''},
                    { label: '回站过磅时间', field: 'outboundWeighingTime', text:()=>this.logisticsData.weighTime},
                    { label: '余料量（方）', field: 'residueNum', text:()=>this.logisticsData.residueNum}
                ],
                leaveData: {},
                // 签收信息
                signInfo: [
                    { label: '调整时间', field: 'adjustmentSignTime'},
                    { label: '调整人', field: 'adjustmentPayee'},
                    { label: '调整签收量（方）', field: 'adjustSignForNum'},
                    { label: '调整余料量（方）', field: 'adjustResidueNum'},
                    { label: '签收类型', field: 'signType', text: ()=> this.signData.signType == 1 ? '手动签收' : '自动签收'},
                    { label: '签收时间', field: 'signTime'},
                    { label: '签收人', field: 'receiver'},
                    { label: '签收量', field: 'signForNum'},
                ],
                signData: {},
                // 翻入信息（表格）
                turnUnderInfo: [
                    { label: "处理时间", prop: "updateTime" },
                    { label: "处理人", prop: "updateUserName" },
                    { label: "处理方式", prop: "typexcx" },
                    { label: "翻前余料量", prop: "beforeCount" },
                    { label: "翻入量", prop: "outCount", render: ({row})=>row.afterNum - row.beforeCount},
                    { label: "翻后余料量", prop: "afterNum" },
                    { label: "翻料类型", prop: "turnoverType", render:({row})=>row.turnoverType == 1 ? '其他翻料':'余料翻料'},
                ],
                turnUnderInfoTableData: [],
                // 余料处理信息（表格）
                cloutDisposeInfo: [
                    { label: "数据来源", prop: "dataSourceType" },
                    { label: "处理时间", prop: "handerTime" },
                    { label: "处理人", prop: "handerMan" },
                    { label: "处理方式", prop: "handerType", render:({row})=>{
                        const obj = {
                            1: '转料',
                            2: '报废',
                            3: '积鼓',
                            4: '翻出'
                        }
                        return obj[row.handerType] || '--'
                    } },
                    { label: "当前余料量", prop: "surplusMaterial" },
                    { label: "处理量", prop: "handerNum" },
                    { label: "转折站点", prop: "transferStation" },
                ],
                cloutDisposeInfoTableData: [],

                MaterialRatioConfig: {}, // 物料配合比数据
                MaterialRatioVisible: false, // 物料配合比弹框显示

                ReverseMaterialInfoConfig: {}, // 翻料信息数据
                ReverseMaterialInfoVisible: false, // 翻料信息弹框显示

                videoConfig: {}, // 卸料视频弹框数据
                videoVisible: false, // 卸料视频弹框显示

                owingTheUser: '', // 泵管使用
            };
        },
        props: {
            config: {
                type: Object,
                default: () => ({}),
            },
            visible: {
                type: Boolean,
            },
        },
        methods: {
            // 处理JSON对象数据
            disposeData(data) {
                if(data && JSON.parse(data)) {
                    const list = JSON.parse(data) || [];
                    return list.map(item=>item.name).join(',') || '--';
                } else {
                    return '--'
                }
            },
            // 查看翻料信息
            lookReverseMaterialInfo() {
                this.ReverseMaterialInfoConfig = {
                    blockData: {}
                };
                this.ReverseMaterialInfoVisible = true;
            },
            // 查看物料配合比
            lookMaterialRatio() {
                this.MaterialRatioConfig = {
                    tableData: JSON.parse(this.logisticsData.mixProportion)
                };
                this.MaterialRatioVisible = true;
            },
            // 查看卸料视频
            lookVideo() {
                this.videoConfig = this.vedioUrlList || [];
                this.videoVisible = true;
            },
            async onOpen() {
                const params = { id: this.config.id }
                const res = await getLogisticsDetail(params);
                if(res && res.code === 1001) {
                    this.data = res.data;
                    this.owingTheUser = res.data.owingTheUser == 1 ? '内部' : '外部'; // 泵管使用
                    this.orderData = res.data.plan; // 订单信息
                    this.scheduleData = res.data.arrangement; // 排程信息
                    this.storeIssueInformTableData = res.data.planNotices; // 发料通知（表格）
                    this.logisticsData = res.data.logistics; // 物流信息
                    this.transportAbnormalData = {
                        declarationTime: res.data.declarationTime, // 物流运输异常-申报时间
                        declarationPeople: res.data.declarationPeople, // 物流运输异常-申报人
                        declarationContent: res.data.declarationContent, // 物流运输异常-申报内容
                        declarationDescribe: res.data.declarationDescribe, // 物流运输异常-异常描述
                        declarationUrls: res.data.declarationUrls, // 物流运输异常-视频地址
                    }; // 运输异常信息
                    this.qualityInformationTableData = res.data.detections; // 质检信息（表格）
                    this.castingInfoTableData = res.data.applyDetList; // 浇筑信息（表格）
                    this.leaveData = res.data.apply; // 离场信息
                    this.signData = res.data.logistics; // 签收信息
                    this.turnUnderInfoTableData = res.treatmentList; // 翻入信息（表格）
                    this.cloutDisposeInfoTableData = res.materialTreatmentVoList; // 余料处理信息（表格）
                }
            },
            onClose() {
                this.$emit("update:visible", false)
            },
        },
    };
</script>
<style lang="scss" scoped>
.box {
    height: 600px;
    overflow-y: auto;
    padding-right: 10px;
}
.title {
    padding-left: 40px;
    margin-top: 40px;
}
.title:first-child {
    margin-top: 0;
}

.itemBox {
    display: flex;
    flex-wrap: wrap;

    .item {
        display: flex;
        width: 49%;
        padding: 10px 0;

        .name {
            width: 180px;
            text-align: right;
            display: block;
            font-weight: 500;
        }
        .text {
            text-decoration: none;
            width: calc(100% - 200px);
        }
        
    }
}
</style>